<template>
	<view class="install-container" style="margin-bottom: 30rpx;">

		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required label="申请人：" name="退货人员">
				<input maxlength="50" placeholder="申请人" v-model="params['退货人员']"
					@input="binddata('退货人员',$event.detail.value)">
			</uni-forms-item>
			<!-- <uni-forms-item required label="申请单位：" name="所属单位">
				<input disabled maxlength="18" v-model="params['所属单位']" placeholder="请输入申请单位"
					@input="binddata('所属单位',$event.detail.value)">
			</uni-forms-item> -->
			<uni-forms-item required label="退回仓库：" name="仓库id">
				<view :class="label == '请选择退回仓库' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('仓库id',$event)" v-model="params['仓库id']"
				 mode="selector" :list="storeList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="退库原因：" name="备注">
				<input maxlength="18" v-model="params['备注']" placeholder="请输入退库原因"
					@input="binddata('备注',$event.detail.value)">
			</uni-forms-item>
			<!-- <uni-forms-item required label="所属楼栋：" name="楼栋id">
				<view :class="label == '请选择所属楼栋' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @click="handleTap('picker')" v-model="params['楼栋id']"
				 mode="selector" :list="buildList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item> -->
			<button class="material-form-btn" @click="submitForm">提交</button>
		</uni-forms>
		<view style="height: 30rpx;"></view>
		<uploader v-model="params['图片']"></uploader>
		<view class="line"></view>
		<view @click="goChoose" class="choose-box">
			<text style="font-size: 50rpx;margin-right: 10rpx;">+</text>
			<text>请选择</text>
		</view>
		<view class="choose-container">
			<retreat-list @delete="handleDelete" @change="handleChange" :list="params['材料清单']"
				v-if="params['材料清单'].length"></retreat-list>
			<view v-else>
				<van-empty description="暂无耗材"></van-empty>
			</view>
		</view>

	</view>
</template>

<script>
	import uploader from '@/components/my-components/image-uploader.vue'
	import RetreatList from '../components/retreatList.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			uploader,
			LbPicker,
			RetreatList
		},
		data() {
			return {
				label: '请选择退回仓库',
				storeList: [],
				params: {
					所属机构id: this.$config.groupId,
					所属机构: null,
					所属单位: null,
					所属单位id: null,
					退货人员id: null,
					退货人员: null,
					退货时间: null,
					仓库id: null,
					备注: null,
					图片: [],
					材料清单: []
				},
				params1: {
					所属机构: 0,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				//表单验证规则
				rules: {
					退货人员: {
						rules: [{
							required: true,
							errorMessage: '请填写申请人',
						}]
					},
					所属单位: {
						rules: [{
							required: true,
							errorMessage: '请填写申请单位',
						}]
					},
					仓库id: {
						rules: [{
							required: true,
							errorMessage: '请选择申请仓库',
						}]
					},
					备注: {
						rules: [{
							required: true,
							errorMessage: '请填写退库原因',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
		},
		onUnload() {
			uni.removeStorageSync('selectList')
		},
		onShow() {
			this.params.退货人员 = uni.getStorageSync('userInfo').name
			this.params.退货人员id = uni.getStorageSync('userInfo').id
			this.params.所属机构 = uni.getStorageSync('groupName')
			this.params.材料清单 = uni.getStorageSync('selectList') || []
			this.getStoreList()
		},
		methods: {
			goChoose() {
				if(!this.params.仓库id) {
					uni.showToast({
						title: '请选择退库仓库',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/materialSystem/materialChoose/materialChoose?id=' + this.params.仓库id 
				})
			},
			getStoreList() {
				this.$http.post('/property/warehouse/list', this.params1).then(res => {
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						res.data.list.forEach(item => {
							item.label = item.仓库名称
							item.value = item.仓库id
						})
						this.storeList = res.data.list
					}
				})
			},
			handleDelete(index) {
				this.params.材料清单.splice(index, 1)
				uni.setStorageSync('selectList', this.params.材料清单)
			},
			handleChange({
				index,
				value
			}) {
				const item = this.params.材料清单[index]
				item.数量 = value
				item.总价 = item.单价 * value
				uni.setStorageSync('selectList', this.params.材料清单)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				// console.log(this.params.户主关系)
				if (e) {
					if(this.params.仓库id !== e.item.value) {
						this.params.材料清单 = []
						uni.removeStorageSync('selectList')
					}
					const name = e.dataset.name
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					// res.检查点id = this.params.检查点id
					if(!this.params.材料清单.length){
						uni.showToast({
							title: '请添加退库耗材',
							icon: 'none'
						})
						return
					}
					this.returnStore()
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
			returnStore() {
				uni.showLoading()
				this.$http.post('/property/rebackPurchase/create', this.params).then(res => {
					if (res.code === 10000) {
						uni.redirectTo({
							url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/pages/service/service' + '&title=返回服务页面'
						})
						// uni.redirectTo({
						// 	url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/materialSystem/index/index' +
						// 		'&title=返回物料首页'
						// })
						uni.removeStorageSync('selectList')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choose-container {
		background-color: #f5f5f5;
	}

	.choose-box {
		font-size: 40rpx;
		color: #1152FC;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.line {
		margin: 40rpx 20rpx 0 20rpx;
		width: 710rpx;
		height: 2rpx;
		background-color: #ccc;
	}

	.install-container {
		padding-bottom: 80rpx;
	}

	.color {
		color: #808080;
	}

	.tap {
		display: flex;
		align-items: center;
	}
</style>
